<template>
	<!-- 刘振坤 2023年4月4号 -->
	<!-- 限时抢购页面点击抢购按钮跳转到抢购详情页面 -->
	<view>
		<!-- 图片轮播图 -->
		<view style="margin-top: 90px;">
			<u-swiper
				:list="imgUrl"
				indicator
				indicatorMode="line"
				circular
				height="300px"
				indicatorActiveColor="#CD879F"
				indicatorInactiveColor="#fff">
			</u-swiper>
		</view>
		<!-- 商品信息 -->
		<view style="width: 96%;margin-left: 2%;background: #F7F8FA;">
			<u-navbar
				height="44px"
				title="限时选购"
				:autoBack="true"
			></u-navbar>
			<view style="width: 104%;margin-left: -2%;">
				<view style="width: 100%;height: 70px;background-color:#F7692E;color: aliceblue;">
					<view style="width: 60%;height: 70px;float: left;">
						<view style="width: 100%;height: 40px;line-height: 40px;">
							<span style="font-size: 16px;margin-left: 10px;">￥<span style="font-size: 22px;">{{ getSeckillListByIdList.seckillPrice }}</span></span>
						</view>
						<view style="width: 100%;height: 30px;color: #FAB098;">
							<span style="margin-left: 10px;font-size: 14px;">价格<span style="text-decoration: line-through;">￥{{ getSeckillListByIdList.price }}</span></span>
						</view>
					</view>
					<view style="float: right;height: 70px;float: right;width: 40%;">
						<view style="width: 100%;height: 40px;line-height: 40px;text-align: center;">
							<span style="font-size: 14px;">距结束仅剩</span>
						</view>
						<view style="width: 100%;height: 30px;">
							<span style="text-align: center;font-size: 14px;">
								<u-count-down :time="time" format="DD天 HH:mm:ss"></u-count-down>
							</span>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;margin-top: 5px;">
				<view style="width: 100%;background: #fff;height: 60px;">
					<view style="height: 60px;width: 90%;float: left;">
						<view style="word-break:break-all;height: 24px;margin-left: 10px;overflow: hidden;width:95%;">
							{{ getSeckillListByIdList.commodityName }}
						</view>
						<view style="word-break:break-all;height: 40px;margin-left: 10px;overflow: hidden;color: grey;font-size: 14px;width: 95%;">
							{{ getSeckillListByIdList.back }}
						</view>
					</view>
					<view style="width: 10%;float: right;height: 60px;">
						<view style="width: 100%;height: 30px;">
							<u-icon customStyle="margin-top:7px;margin-left:5px;" name="share-square" color="grey" size="22"></u-icon>
						</view>
						<view style="width: 100%;height: 30px;margin-top: -3px;">
							<view style="color: grey;">分享</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 35px;background: #fff;margin-top: 10px;line-height: 35px;">
					<view style="color:#00B355;">
						<span style="font-weight: bold;margin-right: 10px;margin-left: 10px;">放心购</span>
						<span style="font-size: 14px;">好物放心买，售后有保障</span>
						<!-- <span style="font-size: 20px;color: grey;float: right;margin-right: 10px;">></span> -->
					</view>
				</view>
				<view style="width: 100%;height: 35px;background: #fff;margin-top: 10px;line-height: 35px;">
					<view style="margin-left: 10px;">
						<span style="color: grey;font-size: 14px;margin-right: 5px;">运费</span>
						<span style="font-size: 14px;">包邮</span>
						<span style="color:grey;font-size: 14px;float: right;margin-left: 10px;margin-right: 10px;">已售{{ getSeckillListByIdList.sold }}</span>
						<span style="color:grey;font-size: 14px;float: right;">剩余{{ getSeckillListByIdList.seckillStock }}</span>
					</view>
				</view>
				<view style="width: 100%;height: 35px;background: #fff;margin-top: 10px;line-height: 35px;">
					<view style="margin-left: 10px;">
						<span style="color: grey;font-size: 14px;margin-right: 5px;">服务</span>
						<span style="font-size: 14px;">快递发货 收货后结算</span>
						<!-- <span style="font-size: 20px;color: grey;float: right;margin-right: 10px;">></span> -->
					</view>
				</view>
				<view style="width: 100%;height: 80px;background: #fff;margin-top: 10px;">
					<view style="margin-left: 10px;">
						<view style="width: 100%;height: 35px;line-height: 35px;float: left;">
							<span style="color: grey;font-size: 14px;margin-right: 5px;">已选</span>
							<span style="font-size: 14px;">蝴蝶结耳饰</span>
							<span @click="OpenSpecifications" style="font-size: 20px;color: grey;float: right;margin-right: 10px;">></span>
						</view>
						<view style="width: 91%;height: 45px;float: left;margin-left:9%;">
							<img style="width: 40px;height: 35px;margin-left: 2px;" src="https://img2.baidu.com/it/u=2948604492,472075579&fm=253&fmt=auto&app=120&f=JPEG?w=350&h=350">
							<img style="width: 40px;height: 35px;margin-left: 2px;" src="https://img2.baidu.com/it/u=984786754,2442167889&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
							<img style="width: 40px;height: 35px;margin-left: 2px;" src="https://img1.baidu.com/it/u=2579146855,1397653102&fm=253&fmt=auto&app=120&f=JPEG?w=350&h=350">
							<img style="width: 40px;height: 35px;margin-left: 2px;" src="https://img0.baidu.com/it/u=1042014080,3638137605&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
							<span style="font-size: 14px;margin-left: 10px;position: relative;top: -12px;color: grey;">共4中颜色分类可选</span>
						</view>
					</view>
				</view>
				<view style="width: 100%;margin-top: 10px;background: #fff;">
					<view style="margin-left: 10px;">
						<view style="width: 97%;height: 30px;line-height: 30px;">
							<span style="font-size:14px;float:left;">商品评价( {{ calculateTheTotalNumberOfCommentsList.totalQuantity }} )</span>
							<span @click="toUserComments" style="float:right;font-size:20px;margin-left:5px;position:relative;top:-2px;color:grey;">></span>
							<span style="font-size:14px;float:right;">
								<span>好评率：100%</span>
							</span>
						</view>
						<u-empty
							mode="list"
							text="暂无评论"
							icon="http://cdn.uviewui.com/uview/empty/data.png"
							v-if="queryCommentsList.length === 0">
						</u-empty>
						<!-- <view v-show="aaa" style="width: 97%;height: 40px;background:palegreen;font-size: 20px;line-height: 40px;text-align: center;font-weight:bold;">
							暂未评论
						</view> -->
						<view v-for="(item, index) in queryCommentsList" :key="index">
							<view style="width: 97%;height: 40px;margin-top: 10px;line-height: 40px;">
								<img style="width: 12%;height: 40px;float:left;" :src="item.url">
								<span style="font-size:18px;color:grey;float:left;margin-left:10px;">{{ item.name }}</span>
								<u-rate style="float:right;position:relative;top:12px;" readonly count="5" v-model="value" size="18px"></u-rate>
							</view>
							<view style="word-break:break-all;font-size:14px;width:97%;margin-top:10px;overflow:hidden;">
								{{ item.content }}
							</view>
							<view style=";width:97%;margin-top:10px;word-break:break-all;">
								<img v-for="img in item.commentImgList":src="img" style="width:23.4%;height:80px;margin-right:5px;">
							</view>
						</view>
					</view>
				</view>
				<view style="width:100%;margin-top:10px;background-color: #fff;">
					<view style="margin-left: 10px;">
						<view style="width: 97%;height:30px;line-height: 30px;">
							<span style="font-size: 14px;float:left;">买家秀(7)</span>
							<span style="float:right;font-size:18px;margin-left:5px;position:relative;top:-1px;color:grey;">></span>
							<span style="font-size:12px;float:right;color:grey;">
								<span>查看全部</span>
							</span>
						</view>
						<view style="width: 97%;height:80px;overflow: hidden;word-break:break-all;">
							<img style="width:23.4%;height:80px;margin-right:5px;" src="https://img1.baidu.com/it/u=3222280812,3600082770&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
							<img style="width:23.4%;height:80px;margin-right:5px;" src="https://img0.baidu.com/it/u=2887300060,1096163181&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300">
							<img style="width:23.4%;height:80px;margin-right:5px;" src="https://img0.baidu.com/it/u=893623675,2788656248&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
							<img style="width:23.4%;height:80px;margin-right:5px;" src="https://img0.baidu.com/it/u=2145012104,2480962654&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
						</view>
					</view>
				</view>
				<view style="width:100%;margin-top: 20px;background:#fff;">
					<view style="margin-left: 10px;">
						<view style="width: 97%;height: 30px;line-height: 30px;">
							<span style="font-size: 14px;">店铺笔记</span>
						</view>
						<view style="height: 120px;width: 97%;">
							<img style="width: 100%;height:110px;" src="https://img0.baidu.com/it/u=4173900878,734153826&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334">
						</view>
					</view>
				</view>
				<view style="width:100%;background:#fff;">
					<view style="margin-left: 10px;">
						<img style="width: 97%;height: 500px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/84890/39/16177/122202/5e79cad0Ec7b2e24a/7137be40e2e02ecf.jpg!q70.dpg.webp">
						<img style="width: 97%;height: 500px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/93350/29/16231/59569/5e79cad0Ee2abf784/a020a91486d9f3ae.jpg!q70.dpg.webp">
						<img style="width: 97%;height: 700px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/87643/5/16401/220608/5e79cad3Eea2f2736/3bd26b40359486c8.jpg!q70.dpg.webp">
					</view>
				</view>
				<!-- 底部栏 -->
				<view style="width: 100%;height: 50px;background:#fff;">
					<u-tabbar
						:value="value6"
						@change="name => value6 = name"
						:fixed="true"
						:placeholder="true"
						activeColor="grey"
						inactiveColor="black"
						:safeAreaInsetBottom="true"
						customStyle="margin-bottom:10px;">
						<u-tabbar-item style="margin-left: -10px;" text="客服" icon="kefu-ermai" dot></u-tabbar-item>
						<u-tabbar-item @click="toShoppingtrolleyTest" style="margin-left: -30px;" text="购物车" icon="shopping-cart" :badge="calculateTheNumberOfShoppingCartsList"></u-tabbar-item>
						<!-- <u-button @click="addToShoppingCart" text="加入购物车" class="button-box" style="background:#FF8855;border-radius: 20px;color:#ffffff;width:200px;"></u-button> -->
						<button @click="toConfirmOrder" id='counter' class="button-box" style="background:#FF4444;border-radius: 20px;width:200px;color:#ffffff;margin-right:10px;font-size:16px;height:40px;margin-top:5px;">立即购买</button>
					</u-tabbar>
				</view>
			</view>
		</view>
		<!-- 选择商品规格弹窗 -->
		<view>
			<u-popup :closeable="true" :show="show" mode="bottom" :round="20" @close="close">
				<view style="height: 360px;width: 100%;background:#F7F8FA;">
					<view style="width:92%;height:30px;line-height:30px;margin-top: 10px;margin-left:10px;">
						<span style="color:red;font-size: 14px;margin-right:5px;font-weight:bold;">￥</span>
						<span style="color:red;font-size: 20px;font-weight:bold;">59.00</span>
						<span style="margin-left:15px;font-size:14px;color:brown;background:#FFF2F2;">限时折扣</span>
						<span style="margin-left:15px;font-size:14px;color:brown;background:#FFF2F2;">限时价</span>
					</view>
					<view style="width:92%;height:30px;line-height:30px;margin-left:14px;">
						<span style="text-decoration: line-through;font-size: 12px;color:grey;">价格￥99.00</span>
					</view>
					<view style="width:92%;height:30px;line-height:30px;margin-left:14px;">
						<span style="font-size: 12px;color:grey;">剩余711件</span>
					</view>
					<view style="width:92%;height:30px;line-height:30px;margin-left:14px;">
						<span style="font-size: 12px;color:grey;">已选 蝴蝶结耳饰</span>
					</view>
					<view style="width:100%;height:175px;line-height:30px;margin-left:14px;">
						<view style="font-size: 12px;float:left;">颜色分类</view>
						<view style="float:left;height:145px;width:92%;overflow:hidden;">
							<view class="sp">
								<view style="width:100%;height:99px;">
									<img style="width:100%;height:99px;border-radius:10px;" src="https://img2.baidu.com/it/u=2169982864,1176767033&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
								</view>
								<view style="width:100%;height:40px;">
									<view style="width: 100%;height:21px;text-align:center;font-size:14px;overflow:hidden;">
										商品名称
									</view>
									<view style="width: 100%;height:15px;font-size:12px;text-align:center;margin-top:-4px;">
										<span>￥109.00</span>
									</view>
								</view>
							</view>
							<view class="sp">
								<view style="width:100%;height:99px;">
									<img style="width:100%;height:99px;border-radius:10px;" src="https://img0.baidu.com/it/u=2416161987,2436731272&fm=253&fmt=auto&app=138&f=JPEG?w=488&h=361">
								</view>
								<view style="width:100%;height:40px;">
									<view style="width: 100%;height:21px;text-align:center;font-size:14px;overflow:hidden;">
										商品名称
									</view>
									<view style="width: 100%;height:15px;font-size:12px;text-align:center;margin-top:-4px;">
										<span>￥109.00</span>
									</view>
								</view>
							</view>
							<view class="sp">
								<view style="width:100%;height:99px;">
									<img style="width:100%;height:99px;border-radius:10px;" src="https://img1.baidu.com/it/u=2215740407,716997290&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375">
								</view>
								<view style="width:100%;height:40px;">
									<view style="width: 100%;height:21px;text-align:center;font-size:14px;overflow:hidden;">
										商品名称
									</view>
									<view style="width: 100%;height:15px;font-size:12px;text-align:center;margin-top:-4px;">
										<span>￥109.00</span>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="width:93%;margin-top: 10px;margin-left:15px;height: 40px;">
						<u-button style="width:100%;height:40px;border-radius:30px;color:#fff;background:#FF4444;" text="下一步"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 默认一个商品数量
				commodityNumber: 1,
				// 当前登录用户id
				userId: '',
				// 用于生成订单的商品信息
				commodityInfo: {},
				// 轮播图
				imgUrl: [],
				// 计算购物车总数量
				calculateTheNumberOfShoppingCartsList: '',
				// 判断是否打开选择商品规格弹窗
				show: false,
				// 底部导航
				value6: 0,
				// 评分默认选中几个
				value: '',
				// 计算评论总数量
				calculateTheTotalNumberOfCommentsList: {},
				// 根据id查询商品评论和用户信息
				queryCommentsList: [],
				// 根据id查询的商品信息
				getSeckillListByIdList: {},
				// 限时选购页面传来的id参数
				id: '',
				// 倒计时
				time: '',
			}
		},
		onLoad(option) {
			// 获取限时选购页面路径传来的参数
			if(option.id!==undefined){
				this.id = option.id
			}else{
				this.id = 2
			}
			const userInfo = wx.getStorageSync('user')
			this.userId = userInfo.id
			this.getSeckillListById()
			this.saveUserHistory()
		},
		methods: {
			//保存用户浏览历史
		 saveUserHistory(){
			let historyData={
			// userId就是登陆用户的id
			 userId:this.userId,
			 // itemId是商品id
			 itemId:this.commodityId,
			 //商品
			 itemType:0
			}
			this.$myRequest({
			 url: '/commodity/detail/saveUserHistory',
			 method:'POST',
			 data: historyData
			}).then(res => {
			 if(res.data.flag){
				console.log(res.data.data)
			 }else{
				console.log(res.data.data)
			 }
			})
		 },
			// 跳转确认订单页面
			toConfirmOrder(){
				let commodityIds = []
				commodityIds.push(this.getSeckillListByIdList.commId)
				this.commodityInfo={
					userId:this.userId,
					commodityIds:commodityIds,
					diyIds:[],
					commodityQuantity:this.commodityNumber,
					addressId:this.addressId,
					// commoditySpec:this.specChooseList.filter(item=> item).join(','),
					// serviceList:this.serviceList,
					numbers:[this.commodityNumber],
					isNoDiy:0
				}
				console.log(this.commodityInfo);
				let commodityInfo = encodeURIComponent(JSON.stringify(this.commodityInfo))
				var id = this.id
				uni.navigateTo({
					url: '/pages/index/OrderSeckillView?commodityInfo='+commodityInfo+`&id=`+id
				})
				// var cid = this.getSeckillListByIdList.cid
				// uni.navigateTo({
				// 	//保留当前页面，跳转到应用内的某个页面
				// 	url: '/pages/goods/OrderView?cid='+cid
				// })
			},
			// 加入购物车
			// addToShoppingCart(){
			// 	this.commodityInfo={
			// 		userId:this.userId,
			// 		commodityId:this.getSeckillListByIdList.cid,
			// 		businessName:'乐工坊',
			// 		commodityName:this.getSeckillListByIdList.commodityName,
			// 		commodityDescribe:this.getSeckillListByIdList.back,
			// 		commodityPrice:this.getSeckillListByIdList.seckillPrice,
			// 		commodityImages:this.getSeckillListByIdList.imageId,
			// 		number:this.commodityNumber,
			// 		// commoditySpec:this.specChooseList.filter(item=> item).join(','),
			// 		// returnAndExchangePolicy:this.serviceList[0],
			// 		returnAndExchangePolicy: '七天可退换',
			// 		isNoDiy:0
			// 	}
			// 	//将商品加入购物车
			// 	this.$myRequest({
			// 		url: '/shoppingCart/saveShoppingCart',
			// 		method:'POST',
			// 		data: this.commodityInfo
			// 	}).then(res => {
			// 		if(res.data.flag){
			// 			//加入购物车成功，跳转至购物车页
			// 			uni.showToast({
			// 				icon: 'success',
			// 				title: '加入购物车成功',
			// 				// 显示时长时间为3秒
			// 				duration: 3000,
			// 			})
			// 			location.reload()
			// 		}else{
			// 			//加入购物车失败
			// 			uni.showToast({
			// 				icon: 'error',
			// 				title: '加入购物车失败',
			// 				// 显示时长时间为3秒
			// 				duration: 3000,
			// 			})
			// 			this.errorMessage = ""
			// 		}
			// 	})
			// },
			// 根据用户id计算购物车总数量
			calculateTheNumberOfShoppingCarts(){
				this.$myRequest({
					url: '/limitedTimePurchase/calculateTheNumberOfShoppingCarts',
					data: {
						userId: this.userId
					}
				}).then(res=>{
					this.calculateTheNumberOfShoppingCartsList = res.data.data
				})
			},
			// 计算评论总数量
			calculateTheTotalNumberOfComments(){
				this.$myRequest({
					url: '/limitedTimePurchase/calculateTheTotalNumberOfComments',
					data: {
						cid: this.getSeckillListByIdList.cid
					}
				}).then(res=>{
					this.calculateTheTotalNumberOfCommentsList = res.data.data
				})
			},
			// 根据id查询商品评论和用户信息（两条数据）
			queryComments(){
				this.$myRequest({
					url: '/commodity/detail/getCommentByCommodityId',
					data: {
						commodityId: this.getSeckillListByIdList.cid
					}
				}).then(res=>{
					if(res.data.flag){
						this.queryCommentsList = res.data.data
						console.log("111111+"+JSON.stringify(this.queryCommentsList));
						for (var i = 0; i < this.queryCommentsList.length; i++) {
							this.queryCommentsList[i].commentImgList =[]
							var imgIds = this.queryCommentsList[i].pictureGroup.split(',')
							for (var j = 0; j < imgIds.length; j++) {
								this.queryCommentsList[i].commentImgList.push('http://101.43.223.224:8765/image/getImageById?id='+imgIds[j])
							}
						}
					}else{
						this.queryCommentsList = []
					}
				})
			},
			// 关闭商品规格弹窗方法
			close() {
				this.show = false
			},
			// 打开商品规格弹窗方法
			OpenSpecifications(){
				this.show = true
			},
			// 根据id查询秒杀商品信息
			getSeckillListById(){
				this.$myRequest({
					url: '/limitedTimePurchase/getSeckillListById',
					data: {
						id: this.id
					}
				}).then(res=>{
					this.getSeckillListByIdList = res.data.data
					this.imgUrl=[]
					var imgIds = this.getSeckillListByIdList.imageId.split(',')
					for (var i = 0; i < imgIds.length; i++) {
						this.imgUrl.push('http://101.43.223.224:8765/image/getImageById?id='+imgIds[i])
					}
					this.queryComments()
					this.calculateTheTotalNumberOfComments()
					this.calculateTheNumberOfShoppingCarts()
					this.time = this.getSeckillListByIdList.seckillDate - new Date
				})
			},
			// 跳转评论页面
			toUserComments(){
				var total = this.calculateTheTotalNumberOfCommentsList.totalQuantity
				var pid = this.getSeckillListByIdList.cid
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/index/UserComments?pid='+pid+`&total=`+total
				})
			},
			// 跳转购物车页面
			toShoppingtrolleyTest(){
				uni.switchTab({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/shoppingtrolley/ShoppingtrolleyTest'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.sp:hover{
		color:red;
		border:2px solid red;
	}
	.sp{
		width:31%;
		float:left;
		margin-right:5px;
		border:1px solid grey;
		border-radius:10px;
	}
	/deep/.u-count-down__text{
		color: #fff;
		font-size: 15px;
		line-height: 22px;
	}
</style>
